<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>transition</title>
    <script src="../js/vue.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="example-8">
{{clientHeight}}
</div>
<script>

    new Vue({
        el: '#example-8',
        data(){
            return {
                clientHeight: '600px',
            }
        },
        mounted() {
            // 动态设置背景图的高度为浏览器可视区域高度
            console.log($.parseJSON("[1,10,11,12,13,14,20,21,22,23,24,25,26,27,28,29,30,40,41,50,51,57,60,61,70,71,72,73,120,121,122,123,130,131,132,133,134,140]"))
            // 首先在Virtual DOM渲染数据时，设置下背景图的高度．
            this.clientHeight.height = `${document.documentElement.clientHeight}px`;
            // 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
            const that = this;
            window.onresize = function temp() {
                that.clientHeight = `${document.documentElement.clientHeight}px`;
            };
        },
    })
</script>
</body>
</html>
